

import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import { httpAddVideo, httpGetVideoListByUserId } from '../../apis';
import VideoCard from '../VideoCard';
import { Modal,Upload,Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { BASE_ADDR } from '../../apis/http';

import "./VideoManage.scss";

export default function VideoManage() {
    const [list,setList] = useState([]);
    const [checkVideoId,setCheckVideoId] = useState(0);
    let user = useSelector(state=>state.user);
    const [isModalVisible, setIsModalVisible] = useState(false);

    useEffect(()=>{
        async function getList() {
            let data = {};
            data.userId = user.userId;
            let res = await httpGetVideoListByUserId(data);
            console.log("VideoListByuserId",res);
            setList(res);
        }
        if(user.userId) {
            getList();
        }
    },[user]); 
    const config = {
        name: checkVideoId,
        action: `${BASE_ADDR}video/upload`,
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
    };
    const showModal = (videoId) => {
        setCheckVideoId(videoId);
        setIsModalVisible(true);
    };
    
    const handleOk = () => {
        setIsModalVisible(false);
    };
    
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div className='VideoManage-container'>
            {
                list.map(v=>(
                    <VideoCard key={v.videoId} {...v} handleClick={showModal}></VideoCard>
                ))
            }
        <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <p>选择的视频ID: {checkVideoId}</p>
            <Upload {...config}>
                <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
        </Modal>
        </div>
    )
}
